<template>
  <div>
    <div class="TitleList">
      <div class="TitleList_top">
        <div class="TitleList_top_title"><span></span>标题列表</div>
        <div class="TitleList_top_txt">
          <div class="top_txt_dd">共计生成 {{ allCount }} 条文章标题<span>已选择 {{ selectedCount }} / {{ allCount }}</span></div>
          <div class="top_txt_dt">
            <div class="txt_dt_list">
              <div class="dt_list_left">分类</div>
              <el-select v-model="class_types" placeholder="默认分类">
                <el-option
                    v-for="item in class_types"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
              <div class="dt_list_icon" @click="show = !show"><img src="@a/img/sv4.svg"/></div>
            </div>
            <div class="txt_dt_list">
              <div class="dt_list_left">审核</div>
              <el-select v-model="check_type" placeholder="默认分类">
                <el-option
                    v-for="item in check_types"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="txt_dt_list txt_dt_btn" @click="doCreateArticle">开始内容创作</div>
          </div>
        </div>
      </div>
      <div class="TitleList_bottom">
        <div class="TitleList_bottom_title">
          <div class="bottom_title_list">
            <label>
              <input type="checkbox" v-model="selectAll">
              序号
            </label>
          </div>
          <div class="bottom_title_list">标题</div>
        </div>
        <div class="TitleList_bottom_content">
          <div class="bottom_content_list" :class="{ on: info.checked }" v-for="(info, index) in tablelist"
               :key="index">
            <div class="content_list_li">
              <label>
                <input type="checkbox" v-model="info.checked">
                {{ index + 1 }}
              </label>
            </div>
            <div class="content_list_li" :class="{ active: info.isActive }">
              <div class="list_li_txt">{{ info.title }}</div>
              <input type="text" class="list_li_input" :placeholder="info.title"/>
            </div>
            <div class="content_list_operate" :class="{ active: info.isActive }">
              <div class="list_operate_li" @click="toggleActive(index)">
                <img src="@a/img/sv5.svg"/>
                <span v-if="!info.isActive">编辑</span>
                <span v-if="info.isActive">保存</span>
              </div>
              <div class="list_operate_li" @click="deleteInfo(index)"><img src="@a/img/sv6.svg"/>删除</div>
            </div>
          </div>
        </div>
        <div class="TitleList_bottom_btn">
          <span>我想导入更多标题</span>
        </div>
      </div>
    </div>
    <div class="CategorySettings" v-show="show">
      <div class="CategorySettings_content">
        <div class="CategorySettings_content_title">
          <div class="content_title_dd"><span></span>分类设置</div>
          <div class="content_title_dt" @click="show = !show"><i class="el-icon-close"></i></div>
        </div>
        <div class="CategorySettings_content_txt">
          <div class="content_txt_title">
            <div class="txt_title_list">序号</div>
            <div class="txt_title_list">排序</div>
            <div class="txt_title_list">名称</div>
          </div>
          <div class="content_txt_table">
            <div class="txt_table_list" v-for="(tab, index) in class_types" :key="index">
              <div class="table_list_li">{{ tab.id }}</div>
              <div class="table_list_li ToSort" :class="{ active: tab.isActive }">
                {{ tab.ToSort }}
                <input type="text" value="0"/>
              </div>
              <div class="table_list_li Name" :class="{ active: tab.isActive }">
                <div class="list_li_name">{{ tab.Name }}</div>
                <input type="text" value="默认分类"/>
              </div>
              <div class="table_list_operate" :class="{ active: tab.isActive }">
                <div class="list_operate_li" @click="toggleActive2(index)">
                  <img src="@a/img/sv5.svg"/>
                  <span v-if="!tab.isActive">编辑</span>
                  <span v-if="tab.isActive">保存</span>
                </div>
                <div class="list_operate_li" @click="deleteInfo2(index)"><img src="@a/img/sv6.svg"/>删除</div>
              </div>
            </div>
            <div class="txt_table_add">
              <div class="table_add_btn" @click="addItem">增加信息+</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {MessageBox} from 'element-ui';

export default {
  name: "table",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      class_type: '',
      check_types: [{
        value: 0,
        label: '自动审核'
      }, {
        value: 1,
        label: '人工审核'
      }],
      check_type: 0,
      class_types: [
        {
          id: 1,
          ToSort: 0,
          Name: "专业服务",
          isActive: false
        },
        {
          id: 2,
          ToSort: 0,
          Name: "网站设计",
          isActive: false
        },
        {
          id: 3,
          ToSort: 0,
          Name: "网站建设",
          isActive: false
        },
        {
          id: 4,
          ToSort: 0,
          Name: "网络科技",
          isActive: false
        },
        {
          id: 5,
          ToSort: 0,
          Name: "网址模板",
          isActive: false
        },
      ],
      nextId: 6,
      show: false,
    };
  },
  computed: {
    selectAll: {
      get() {
        return this.list.every(info => info.checked)
      },
      set(value) {
        this.list.forEach(info => {
          info.checked = value
        })
      },
    },
    selectedCount() {
      return this.list.filter(info => info.checked).length
    },
    allCount() {
      return this.list.filter(info => info).length
    }
  },
  methods: {
    doCreateArticle() {
      if (!this.$store.getters.isLogin) {

      }
    },
    //点击增加信息
    addItem() {
      this.tabs.push({id: this.nextId++, ToSort: 0, Name: `新增的信息 ${this.nextId - 1}`, isActive: false});
    },
    //标题列表保存、编辑
    toggleActive(index) {
      this.list.forEach((info, i) => {
        if (i === index) {
          info.isActive = !info.isActive;
        }
      });
    },
    //分类设置保存、编辑
    toggleActive2(index) {
      this.tabs.forEach((tab, i) => {
        if (i === index) {
          tab.isActive = !tab.isActive;
        }
      });
    },
    //分类设置删除
    deleteInfo2(index) {
      const item = this.tabs[index];
      MessageBox.confirm(`确定删除${item.Name}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        // 用户点击确定后执行删除操作
        this.tabs.splice(index, 1);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
        // 用户点击取消或者弹窗关闭时不做任何操作
      });
    },
    //标题列表删除
    deleteInfo(index) {
      const item = this.list[index];
      MessageBox.confirm(`确定删除${item.title}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        // 用户点击确定后执行删除操作
        this.list.splice(index, 1);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
        // 用户点击取消或者弹窗关闭时不做任何操作
      });
    },
  },
}
</script>

<style scoped>
@import "table.css";
</style>
